<script lang="ts" setup>
/**
 * Props
 * @width 组件宽度
 * 默认 90vw
 *
 * @height 组件高度
 * 默认80rpx
 *
 * @focus 自动聚焦
 * 默认 false
 *
 * @placeholder 占位符
 *
 * @clear 尾部清除按钮
 *
 * @disabled 禁用
 *
 * Emits
 * @value 搜索返回值
 */
import { PropType, ref } from 'vue'
import Input from '@C/Input.vue'
import ICON from '@C/Icon.vue'
import { hasUnit } from '@U/common'
import type { IObj } from '@/interface'

defineProps({
  width: {
    type: String,
    required: false,
    default: '90vw',
  },
  height: {
    type: String,
    required: false,
    default: '80',
  },
  placeholder: {
    type: String,
    required: false,
    default: '请输入内容',
  },
  clear: {
    type: Boolean,
    required: false,
    default: true,
  },
  disabled: {
    type: Boolean,
    required: false,
    default: false,
  },
  focus: {
    type: Boolean,
    required: false,
    default: false,
  },
  wrapStyle: {
    type: Object as PropType<IObj>,
    required: false,
    default: () => ({}),
  },
})
const emits = defineEmits(['value'])
defineExpose({
  onClear,
})

// input 值
const inputVal = ref('')

// 搜索
const onSearch = () => {
  emits('value', inputVal.value)
}

// 清空
function onClear() {
  inputVal.value = ''
  onSearch()
}

</script>

<template>
  <div
    :style="{
      width: hasUnit(width),
      height: hasUnit(height),
      ...wrapStyle,
    }"
    class="prm-search"
  >
    <div style="margin-left: 60rpx;"><ICON name="icon-sousuo1" size="30" /></div>
    <div class="prm-search-input">
      <Input
        v-model:value="inputVal"
        :clear="clear"
        :disabled="disabled"
        :focus="focus"
        :height="height"
        :placeholder="placeholder"
        :width="hasUnit(`calc(${width} - 72rpx)`)"
        @confirm="onSearch"
      />
    </div>
  </div>
</template>

<style lang="less" scoped>
.prm-search {
  border-radius: 50rpx;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 28rpx;
  .prm-search-input {
    flex: 1 1;
  }
}

</style>